<template>
  <qx-table :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeft>
      <q-import :errorParam="['AGV_MAS_DATA', 'importAgvMasDataShelfConvert']" :importQuery="{ coverFlag: false }"
                downUrl="/yfagv/api/agvMasDataShelfConvert/importInfoTemplate"
                importUrl="/yfagv/api/agvMasDataShelfConvert/importAgvMasDataShelfConvert"
                @import-after="startSearch"></q-import>
    </template>
    <template v-slot:shelfNo="{ row }">
      <div class="full-width">
        <qx-tooltip>{{ row.shelfNo }}</qx-tooltip>
      </div>
      <q-icon class="q-mx-auto" name="transform" size="1.2rem"></q-icon>
      <div class="full-width text-right">
        <qx-tooltip>{{ row.convertShelfNo }}</qx-tooltip>
      </div>
    </template>
    <template v-slot:menu="{ row }">
      <q-btn class="col" color="primary" icon="delete" outline unelevated @click="handleDelete(row)">
        {{ $t('Del') }}
      </q-btn>
      <q-btn class="col" color="primary" icon="delete" outline unelevated @click="handleDeleteByApp(row)">
        {{ $t('AppCore.DeleteByApp') }}
      </q-btn>
    </template>
  </qx-table>
</template>
<script setup>
import { i18n, toI18nName } from 'boot/i18n.js'
import { deleteAPI } from 'src/api/index.js'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { computed, onMounted, ref } from 'vue'
import { createDialog } from 'src/utils/utils.js'

const apps = ref([])
const searchForm = ref({})
const remoteData = ref({ dicUrl: '/yfagv/api/agvMasDataShelfConvert/list' })
getRemoteData('agv_apps', '/yfagv/api/sdaiAuthApp/list').then(data => (apps.value = data))

const tableOption = computed(() => {
  return {
    grid: true, span: 22, export: true, labelWidth: 100, headerWidth: 60, searchSpan: 5,
    column: [{
      label: `${i18n.t('CarrierCore.SystemRackCode')}`, field: 'shelfNo', minWidth: 100, required: true,
      slot: true, nonHeader: true
    }, {
      label: `${i18n.t('CarrierCore.AppSystemRackCode')}`, field: 'convertShelfNo', minWidth: 100, required: true,
      hide: true
    }, {
      label: `${i18n.t('AppCore.AppCode')}`, field: 'reqAppId', type: 'select', options: apps.value,
      minWidth: 100, props: { label: toI18nName('appNameZhCn'), value: 'appId' }
    }, {
      label: `${i18n.t('Misc.ConversionTime')}`, field: 'createdTime', type: 'date', required: true, minWidth: 70,
      search: false, display: false
    }]
  }
})

const handleDelete = row => {
  createDialog({ msg: `${i18n.t('DelTips')}` }, () => {
    deleteAPI('/yfagv/api/agvMasDataShelfConvert/deleteList', { idList: [row.id] }, () => startSearch())
  }, () => {})
}
const handleDeleteByApp = row => {
  createDialog({ msg: `${i18n.t('AppCore.DeleteByAppTips')}` }, () => {
    deleteAPI('/yfagv/api/agvMasDataShelfConvert/deleteByAppId', { appid: row.reqAppId }, () => startSearch())
  }, () => {})
}
const formatSearchForm = () => ({ ...searchForm.value })
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}

onMounted(startSearch)
</script>